<?php //debug(json_encode($group));  ?>
<form id="group_details_form" class='form-horizontal' action='' method='post'>
    <div class='form-group'>
        <div class='col-lg-3 control-label'>Name: </div>
        <div class='col-lg-9 controls'>
            <input id="group-name" type='text' class='input-sm form-control' readonly="" value="<?php echo $group['OrganisationGroup']['name']; ?>" />
            <input id="group-id" type="hidden" value="<?php echo $group['OrganisationGroup']['id']; ?>" />
        </div>
    </div>

    <div class='form-group'>
        <div class='col-lg-3 control-label'>
            Leader(s): 

        </div>
        <div class='col-lg-9 controls'>
            <div class="row m-b-xs">
                <div class="col-lg-12">
                    <?php if( !$group['OrganisationGroupLeader']) { ?>
                    <span id="leaders_info" class="pull-left m-t-xs">No Leaders Assigned.</span>
                    <?php } ?>
                    
                    <a id="add_leader_btn" href='#' class='btn btn-sm btn-white pull-right'><i class='fa fa-plus'></i> Add Leader</a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class='list-group' id="leaders">
                        <?php foreach ($group['OrganisationGroupLeader'] as $leader) { ?>
                            <div class='list-group-item' data-id="<?php echo $leader['id']; ?>">

                                <div class="media">
                                    <span class="pull-left thumb-sm">
                                        <?php
                                        $member = $leader['OrganisationMember']['Member'];
                                        $url = isset($leader['OrganisationMember']['Member']['MemberImage'][0]['thumb_url']) ?
                                                $leader['OrganisationMember']['Member']['MemberImage'][0]['thumb_url'] : '';
                                        ?>

                                        <img src="<?php echo $url; ?>" alt="John said" class="member-profile-image img-circle" onerror="App.profileImageError(this);" />
                                    </span>
                                    <div class="pull-right m-t-sm">
                                        <a href="#" class="remove-leader-btn text-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-body">
                                        <div><a href="#"><?php echo $member['first_name'] . ' ' . $member['last_name']; ?></a></div>
                                        <small class="text-muted"><?php echo $leader['role']; ?></small>
                                    </div>
                                </div>

                            </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script id="group-leader-tmpl" type="text/html">
    <div class='list-group-item' data-leader-id="{{leader.id}}">
        <div class="media">
            <span class="pull-left thumb-sm">
                <img src="{{leader.member_image}}" alt="John said" class="member-profile-image img-circle" />
            </span>
            <div class="pull-right text-danger m-t-sm">
                <i class="fa fa-times"></i>
            </div>
            <div class="media-body">
                <div><a href="#">{{leader.member_name}}</a></div>
                <small class="text-muted">{{leader.role}}</small>
            </div>
        </div>
    </div>
</script>